<template>
  <view class="pick-up-point-page">
    <view class="list">
      <view
        class="item"
        v-for="item in list"
        :key="item.id"
        :class="{ active: item.id == select }"
        @click="pickUp(item)"
      >
        <view>
          <view class="title">
            {{
              item.provinceName + item.cityName + item.countyName + item.address
            }}
          </view>
          <view class="time" v-if="false">自提时间{{ item.time }}</view>
        </view>
        <view class="selected">
          <u-image
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-dui.png"
            width="32rpx"
            height="32rpx"
            v-if="item.id == select"
          ></u-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPickUpList } from "@/config/api.js";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      select: 0,
      list: null,
      current: 1,
      activeTab: "",
      total: 0,
      loadAll: false, // 已加载全部
      keyId: 0,
    };
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    ...mapMutations(["SELECT_PICK_UP_POINT"]),
    getList() {
      getPickUpList({ _id: this.id })
        .then((res) => {
          if (res.code === 200) {
            this.list = res.data;
            if (this.$store.state.selectPickUpPoint.id) {
              this.select = this.$store.state.selectPickUpPoint.id;
            } else {
              this.select = this.list[0].id;
            }
          } else {
            this.list = [];
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    pickUp(item) {
      this.select = item.id;
      this.SELECT_PICK_UP_POINT(item);
      this.toURL("", {}, { type: "back" });
    },
  },
};
</script>

<style lang="scss">
.pick-up-point-page {
  padding-bottom: env(safe-area-inset-bottom);

  .list {
  }

  .item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    padding: 32rpx 40rpx 30rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    &.active {
      background: #f9f4f2;
    }

    .title {
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.8);
      line-height: 40rpx;
      padding-right: 40rpx;
    }

    .time {
      margin-top: 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;
    }

    .selected {
      flex: none;
      width: 32rpx;
      height: 32rpx;
      margin-top: 4rpx;
    }
  }
}
</style>
